<template>
<div>
        <el-select v-model="collegeValue" placeholder="请选择" @change="change()" style="height: 50px">
            <el-option
                    v-for="item in collegeForm"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
            </el-option>
        </el-select>
        <el-select v-model="majorValue" placeholder="请选择" style="height: 50px">
            <el-option
                    v-for="item in majorForm"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
            </el-option>
        </el-select>
    <el-form style="width: 60%" :model="teacherForm" :rules="rules" ref="teacherForm" label-width="100px"  class="demo-ruleForm">
        <el-form-item label="一级部门ID" >
            <el-input v-model="collegeValue" readOnly></el-input>
        </el-form-item>
        <el-form-item label="二级部门ID"  >
            <el-input v-model="majorValue"  readOnly></el-input>
        </el-form-item>
        <el-form-item label="教职工号" prop="id">
            <el-input v-model="teacherForm.id" ></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="name">
            <el-input v-model="teacherForm.name"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="iphone">
            <el-input v-model="teacherForm.iphone" ></el-input>
        </el-form-item>
        <el-form-item label="排序(默认0)" prop="px">
            <el-input v-model="teacherForm.order" ></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm('teacherForm')">立即创建</el-button>
            <el-button @click="resetForm('teacherForm')">重置</el-button>
            <el-button @click="back()">返回</el-button>
        </el-form-item>
    </el-form>
</div>
</template>

<script>
    export default {
        name: "AddTeacher",
        created()
        {
            const _this=this;
            axios.get("http://localhost:8181/teacher/f1").then(function (resp) {
                console.log(resp.data)
                _this.collegeForm=resp.data;
                console.log(_this.collegeValue)
            })
        },
        data(){
            return {
                collegeForm: {
                id: '',
                name: ''
            },
                majorForm:{
                    id:'',
                    name:'',
                    collegeId:''
                },
                teacherForm:{
                    userid:'',
                    name:'',
                    iphone:'',
                    collegeId:'',
                    majorId:'',
                    order:'0',
                },
                collegeValue:'',
                majorValue:'',
                rules:{
                    name:[
                        {
                            required:true,message:'名称不能为空',trigger:'blur'
                        }
                    ],
                    id:[
                        {
                            required:true,message:'id不能为空',trigger:'blur'
                        }
                    ],
                    iphone:[
                        {
                            required:true,message:'手机号不能为空',trigger:'blur'
                        }
                    ],
                    collegeId:[
                        {
                            required:true,message:'学院ID不能为空',trigger:'blur'
                        }
                    ],
                    majorId: [
                        {
                            required:true,message:'部门id不能为空',trigger:'blur'
                        }
                    ]
                }
            }
        },
        methods:{
            back(){
                const _this=this
                console.log(this.$route.query.code);
                if(this.$route.query.code === '0'){
                    this.$router.push("/QueryTeacher");
                }
                else{
                    this.$router.push("/TeacherInfo")
                }

            },
            change(){
                const _this =this
                axios.get("http://localhost:8181/teacher/findByCollegeId/"+this.collegeValue).then(function (resp) {
                    _this.majorForm=resp.data
                    console.log(resp.data)
                })
            },
            submitForm(formName) {
                const _this=this
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        _this.teacherForm.collegeId=_this.collegeValue;
                        _this.teacherForm.majorId=_this.majorValue;
                        console.log(this.teacherForm)
                        axios.post('http://localhost:8181/teacher/createTeacher',this.teacherForm).then(function(resp) {
                            if (resp.data==='添加成功'){
                                _this.$alert('教职工: '+_this.teacherForm.name+' 添加成功!', '消息', {
                                    confirmButtonText: '确定',
                                    callback: action => {
                                        _this.$router.push("/QueryTeacher")
                                    }
                                });
                            }
                            else{
                                _this.$alert('部门: '+_this.teacherForm.name+' 添加失败!  错误信息: '+resp.data,'消息',{
                                    confirmButtonText:'确定',
                                    callback:action => {
                                        _this.$router.push("/QueryTeacher")
                                    }
                                });
                            }
                        })
                    } else {
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        }

    }
</script>

<style scoped>

</style>
